<template>
    <view class="w-[100%] flex flex-col relative bg-[#F3F5F9] min-h-[100vh]">
       
       
        <z-paging :empty-view-img="'213'" :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`" :empty-view-text="`暂无宠物请点击下方添加`"  ref="paging" v-model="fenceList"
        @query="queryList" :fixed="true" width="100%" height="100%" >
       
        <!-- 围栏列表 -->
        <view class="px-[40rpx] mt-[30rpx] flex flex-col gap-[30rpx] mb-[100rpx]">
            <view v-for="(fence, index) in fenceList" :key="index" class="bg-white rounded-[24rpx] p-[30rpx]">
                <view class="text-[32rpx] font-bold text-[#000000]">围栏名称:{{ fence.name }}</view>
                
                <view class="mt-[20rpx] flex">
                    <text class="text-[28rpx] text-[#999999]">半径: </text>
                    <text class="text-[28rpx] ml-[8rpx] text-[#333333]">{{ fence.radius }}km</text>
                </view>
                
                <view class="mt-[10rpx] flex flex-col">
                    <view class="flex">
                        <text class="text-[28rpx] text-[#999999]">位置: </text>
                        <text class="text-[28rpx] text-[#333333] flex-1">{{ fence.address }}</text>
                    </view>
                </view>
                
                <view class="flex justify-end mt-[20rpx]">
                    <view @click="deleteFence(fence.id)" 
                        class="bg-[#4F6EFD] text-white rounded-[100rpx] px-[40rpx] py-[15rpx] text-[28rpx]">
                        删除围栏
                    </view>
                </view>
            </view>
        </view>
        <template #bottom>
            <view class="fixed bottom-[80rpx] left-0 right-0 flex justify-center">
            <view @click="addNewFence" 
                class="bg-[#C0FF00] w-[538rpx] h-[108rpx] rounded-[100rpx] flex items-center justify-center text-[32rpx] font-bold"
                style="border: 3rpx solid #000000;">
                新增围栏
            </view>
        </view>
        </template>
    </z-paging>
        
        <!-- 底部新增按钮 -->
       
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import{ getFenceList ,delFence} from '@/api/pet.js';

// 围栏列表数据
const fenceList = ref([
   
]);
const paging = ref(null);
const queryList = async (pageNum, pageSize) => {
	try {
		const from = {
			pageNum: pageNum,
			pageSize: pageSize,
            
		};
		const { rows } = await getFenceList(from);
		paging.value.complete(rows);
	} catch (e) {
		console.log('报错=>', e);
		//TODO handle the exception
		paging.value.complete(false);
	}
};

// 删除围栏
const deleteFence = (id) => {
    uni.showModal({
        title: '提示',
        content: '确定要删除该围栏吗？',
        success: async (res) => {
            if (res.confirm) {
                try {
                    const data = {
                        id: id
                    };
                    // 调用删除API
                    await delFence(data);
                    
                    // 更新列表（移除已删除的围栏）
                    fenceList.value = fenceList.value.filter(item => item.id !== id);
                    
                    // 显示成功提示
                    uni.showToast({
                        title: '删除成功',
                        icon: 'success'
                    });
                    
                    // 如果当前页数据为空且不是第一页，返回上一页
                    if (fenceList.value.length == 0 && paging.value.getCurrentPage() > 1) {
                        paging.value.prevPage();
                    }
                } catch (error) {
                    console.error('删除围栏失败:', error);
                    uni.showToast({
                        title: '删除失败，请重试',
                        icon: 'none'
                    });
                }
            }
        }
    });
};

// 新增围栏
const addNewFence = () => {
    uni.navigateTo({
        url: '/pages_cw/addfence/addfence'
    });
};

</script>

<style scoped>
</style>